<template>
  <div class="attr-item">
    <div class="attr-item-label">
      <span>{{ title }}</span>
    </div>
    <div class="attr-item-value">
      <a-input v-model:value="curResult" />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'

export default defineComponent({
  name: 'BwNodeAttrsConstConfigInput',
  props: {
    title: {
      type: String,
    },
    value: {
      type: String,
    },
  },
  emits: ['update:value', 'change'],
  setup(props, { emit }) {
    /** 对象值 */
    const curResult = computed({
      get: (): string | undefined => {
        return props.value
      },
      set: (value) => {
        emit('update:value', value)
        emit('change', value)
      },
    })

    return { curResult }
  },
})
</script>

<style lang="less" scoped>
.attr-item {
  display: flex;
  align-items: center;
  padding: 8px;

  .attr-item-label {
    width: 90px;
    text-align: left;
  }

  .attr-item-value {
    flex: 1;
  }

  .required:after {
    color: red;
    content: '*';
  }
}
</style>
